<template>
  <div class="adminhome">
    <div class="left">
      <li class="comment even thread-odd thread-alt depth-1" id="li-comment-4">
        <article id="comment-4">
          <img :src="form.avatar" class="avatar touxiang avatar-60 photo" height="60" width="60"/>
          <div class="comment-meta">
            <h5 class="author">{{form.nickname}}</h5>
            <p class="date" v-if="form.realstate==3">认证用户</p>
            <p class="date" v-else>未认证用户</p>
          </div>
          <el-button type="primary" @click="$router.push('/admin/myself')">编辑信息</el-button>
        </article>
      </li>
      <div class="xinxi">
        <p style="color: #000;">邮箱：</p>
        <p>{{form.mail}}</p>
      </div>
      <div class="xinxi">
        <p style="color: #000;">QQ：</p>
        <p>{{form.qq}}</p>
      </div>
      <div class="xinxi">
        <p style="color: #000;">个人简介：</p>
        <p>{{form.synopsis}}</p>
      </div>
    </div>
    <div class="right" style="width: 70%;">
      <chart style="width: 100%;" :options="optioncontentshadow" :auto-resize="true"></chart>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'adminhome',
  data () {
    return {
      form: {},
      optioncontentshadow: {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: []
          }
        ]
      }
    }
  },
  methods: {
    ...mapActions('user', [
      'setUserInfo'
    ]),
    // 获取用户信息
    async getUser () {
      const result = await this.$axios.post('/webadmin/getuser')
      this.form = result.data.data
      const userInfo = {
        uid: result.data.data.user_id,
        nickname: result.data.data.nickname,
        avatar: result.data.data.avatar,
        companystate: result.data.data.companystate,
        realstate: result.data.data.realstate
      }
      this.setUserInfo(userInfo)
    },
    async getUserNumbering () {
      const result = await this.$axios.post('/webadmin/getusernumbering')
      this.optioncontentshadow.series[0].data.push(result.data.data.help, result.data.data.activity, result.data.data.article, result.data.data.job, result.data.data.oldstuff)
      this.optioncontentshadow.xAxis[0].data = ['问答交流', '活动', '文章新闻', '岗位', '二手']
    }
  },
  created () {
    this.getUser()
    this.getUserNumbering()
  }
}
</script>

<style scoped>
  .left {
    width: 30%;
    float: left;

  }

  .right {
    width: 60%;
    float: left;
  }

  .xinxi p {
    display: inline;
  }

  .xinxi {
    margin-top: 30px;
    margin-left: 30px;
  }

  li {
    list-style-type: none;
  }
</style>
